<template>  
    <view class="container">  
		<view class="user-section" style="background-color: #fff;">
			<view class="user-info-box" v-if="userInfo">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.headImg || '../../static/missing-face.png'"></image>
					<button class="portrait-icon" open-type="chooseAvatar" @chooseavatar="chooseavatar"><uv-icon name="camera" size="20" color="#fff"></uv-icon></button>
				</view>
				<view class="info-box" style="">
					<!-- <view class="" style="display: flex;align-items: center; " v-if="nameShow == 0" @click="nameShow = 1">
						<text class="username">{{ userInfo.userName }}</text>
						<uv-icon name="edit-pen" color="#333" size="24"></uv-icon>
					</view> -->
					<!-- <input v-if="nameShow == 1" type="nickname" @blur="blurname" :focus="true" v-model="userInfo.userName" placeholder="请输入昵称" /> -->
					<text class="username">{{studentInfo.studentName}}</text>
					<text class="uid">{{ studentInfo.enterpriseName }}</text>
					<text class="uid">学号:{{ studentInfo.cardNo }}</text>
					
				</view>
			</view>
			<view class="user-info-box" v-else>
				<view class="portrait-box"><image class="portrait" src="../../static/missing-face.png"></image></view>
				<view class="info-box" style="">
					<text class="username">游客</text>
					<text class="uid">登录后查看</text>
				</view>
			</view>
		</view>
		<view class="" style="padding: 20rpx 30rpx;">
			<view class="history-section">
				<view class="list" v-for="item in list" @click="goPath(item)">
					<view class="list-left">
						<uv-icon :name="item.icon" color="#fa7f26" size="22"></uv-icon>
						<view class="title">
							{{item.name}}
						</view>
					</view>
					<view class="list-right">
						<uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
					</view>
				</view>
				
				<button  open-type="contact" >
					<view class="list" style="padding: 0;border: none;">
						<view class="list-left">
							<uv-icon name="server-man" color="#fa7f26" size="22"></uv-icon>
							<view class="title">
								我的客服
							</view>
						</view>
						<view class="list-right">
							<uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
						</view>
					</view>
				</button>
				<!-- <uv-cell-group>
						<uv-cell icon="map-fill" title="地址管理" color="#5fcda2" size="20" :isLink="true"  url="/pages/address/address"></uv-cell>
						<uv-cell icon="star-fill" title="我的收藏" :isLink="true" url="/pages/user/collect"></uv-cell>
						<uv-cell icon="rmb-circle-fill" title="我的优惠券" :isLink="true" url="/pages/user/mycoupon"></uv-cell>
						
				</uv-cell-group> -->
			</view>
		</view>
		
		<view class="" style="text-align: center;padding-top: 100rpx;color: #D9D6D6;font-size: 26rpx;">
			版本号v{{version}}
		</view>
		
		
    </view>  
</template>  
<script>  
  import { searchUserInfoById,userIsLogin,updateUserInfo,
	uploadImages, } from '../../utils/api.js';
    export default {
		
		data(){
			return {
				userInfo:{
					
				},
				list:[
					{
						name:'题目收藏',
						icon:'star',
						path:'/pages/user/starList/starList'
					},
					{
						name:'练习记录',
						icon:'edit-pen',
						path:'/pages/user/lianxiList/lianxiList'
					},
					{
						name:'考试记录',
						icon:'file-text',
						path:'/pages/user/testList/testList'
					},
					// {
					// 	name:'合作声明',
					// 	icon:'info-circle',
					// 	path:''
					// },
					// {
					// 	name:'提交记录',
					// 	icon:'file-text',
					// 	path:'/pages/user/submitList/submitList'
					// },
				],
				version:'',
				studentInfo:uni.getStorageSync('studentInfo')
			}
		},
		onLoad() {
		},
		onShow() {
			userIsLogin().then(sult => {
				if (sult.body.isLogin) {
					this.getuserInfo();
					const miniProgram  = wx.getAccountInfoSync();
					this.version=miniProgram.miniProgram.version
				} else {
					uni.removeStorageSync('studentInfo');
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('__ddminiUserOpenid');
					uni.removeStorageSync('__DC_STAT_UUID');
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 500);
				}
			});
			
		},
		
       
        methods: {
			getuserInfo() {
				let self = this;
				let data = {
					userId: uni.getStorageSync('userInfo').id
				};
				searchUserInfoById(data).then(res => {
					if (res.code == 200) {
						console.log(res.body);
						this.userInfo = res.body;
					}
				});
			},
			goPath(item){
				uni.navigateTo({
					url:item.path
				})
			},
			goUser(){
				uni.navigateTo({
					url:'/pages/user/userInfo'
				})
			},chooseavatar(img) {
			let that = this;
			uni.showLoading({
				title: '头像更新中',
				mask: true
			});
			console.log(img);
			// updateUserInfo, uploadImages
			let data = {
				file: img.detail.avatarUrl, //你要传的临时文件
				type: 1
			};
			uploadImages(data).then(res => {
				if (res.code == 200) {
					that.userInfo.headImg = res.body;
					updateUserInfo(that.userInfo).then(ues => {
						if (ues.code == 200) {
							uni.hideLoading();
							this.getuserInfo();
							uni.showToast({
								title: '更新成功'
							});
						}
					});
				} else {
					uni.hideLoading();
					uni.showModal({
						content: res.msg,
						showCancel: false
					});
				}
			});
		},
		blurname(e) {
			// console.log(e,788);
			let that = this;
			that.userInfo.userName = e.detail.value;
			updateUserInfo(that.userInfo).then(ues => {
				if (ues.code == 200) {
					uni.hideLoading();
					this.getuserInfo();
					uni.showToast({
						title: '更新成功'
					});
					that.nameShow = 0;
				}
			});
		},
        }  
    }  
</script>  
<style lang="scss">
	button{
		width: 100%;
		padding: 0;
		color: #333;
		height:100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		background-color: #fff;
	}
	button::after{
		border: none;
		padding: 0;
	}
page{
	box-sizing: border-box;
	background-color: #f5f5f5;
	
}
	.user-info-box {
		height: 250rpx;
		display: flex;
		align-items: center;
		z-index: 1;
		padding: 0 30rpx;
		.portrait-box {
			width: 130rpx;
			height: 130rpx;
			// border: 5rpx solid #fff;
			border-radius: 50%;
			position: relative;
			.portrait {
				width: 130rpx;
				height: 130rpx;
				// border: 5rpx solid #fff;
				border-radius: 50%;
				vertical-align: top;
			}
			.portrait-icon {
				background-color: #ed781b;
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 0;
				right: -10rpx;
			}
		}
	
		.info-box {
			margin-left: 40rpx;
			display: flex;
			flex-direction: column;
			.username {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 15rpx;
			}
			.uid {
				font-size: 24rpx;
			}
		}
	}
	.history-section{
		background-color: #fff;
		padding:0 40rpx;
		border-radius: 20rpx;
		margin-top: 50rpx;
		.list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1rpx dashed #e8e8e8;
			.list-left{
				display: flex;
				align-items: center;
				.title{
					font-size: 28rpx;
					margin-left: 10rpx;
					color: $uni-text-color;
				}
				
			}
			.list-right{
				
			}
		}
	}

	
	
</style>